<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Browser</title>
    <script src='https://unpkg.com/@flatten-js/core'></script>
    <script src='https://unpkg.com/@flatten-js/boolean-op'></script>
</head>
<body>
    <svg id="stage" width="1000" height="600"></svg>
<script>
    const Flatten = window["@flatten-js/core"];
    const {point, Polygon} = Flatten;
    const {intersect} = window["boolean-op"];

    let polygon1 = new Polygon();
    polygon1.addFace([point(200,10), point(100, 300), point(400, 150), point(250, 10)]);

    let polygon2 = new Polygon();
    polygon2.addFace([point(450, 10), point(0, 150), point(300,300), point(600, 300)]);

    let polygon_res = intersect(polygon1, polygon2);

    document.getElementById("stage").innerHTML = polygon1.svg() + polygon2.svg() +
        polygon_res.svg({"fill":"lightgreen"});
</script>
</body>
</html>
